<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link  href="{$module_path}/resource/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link  href="{$module_path}/resource/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link  href="{$module_path}/resource/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
    <link  href="{$module_path}/resource/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
    <link  href="{$module_path}/resource/sign.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="{$module_path}/resource/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="{$module_path}/resource/jquery.confirm.css">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script type="text/javascript"  src="{$module_path}/resource/jquery.min.2.1.1.js"></script>
    <script type="text/javascript"  src="{$module_path}/resource/bootstrap.min.js"></script>
    <script type="text/javascript"  src="{$module_path}/resource/jquery.confirm.js"></script>
</head>
<body>


<div style="text-align:center">

        <div class="page_title ">
            <button id="glyphicon">
                <span class="glyphicon glyphicon-chevron-left" ></span>
            </button>
            <span class="hallList"  >新签影院</span>
       <!--     <HR  width="100%" color=#000000 SIZE=2>   -->
        </div>

    <form name="form0" id="form0"  class="main_form" action="/cinema_h5/create_user_store" method="post" >
        <input name="bm" class="bm"  type="radio" value="1" checked="checked" /><a class="bm" >影院签约</a>
        <input name="bm" class="bm"  type="radio" value="2"/><a class="bm" >私人影吧</a>
        <HR  width="100%" color=#000000 SIZE=2>
        <a href="#" class="thumbnail">
            <img id="cover" width="80%" height="40%" alt="门店图" src="" />
        </a>
       <HR  width="100%" color=#000000 SIZE=2>
        <a  class="file">点击选择门头图
            <input type="file" name="file0" id="file0" accept="image/png,image/jpg,image/jpeg" />
        </a>
            <br><img src="" id="img0" >


        <table class="table" >
           <tr ><td colspan="2">
                    是否允许赊账：
               <input name="is_allow_credit"   type="radio" value="1" /><a class="bm" >允许</a>
               <input name="is_allow_credit"   type="radio" value="0" checked="checked" /><a class="bm" >不允许</a>

           </td></tr >
           <tr id="zzbRow" name="zzbRow" ><td colspan="2">专资编码：
               <input id="zzb_code" name="zzb_code" type="text" placeholder="请输入专资编码">
                <button  id="search" type="button"  >搜索</button>
            </td></tr >
            <tr><td colspan="2">公司名称：
                <input id="company"   name="company"  type="text" placeholder="营业执照上公司名称"></td></tr >
            <tr><td colspan="2">统一社会信用代码：<input id="credit_code"   name="credit_code" style="width: 70%" type="text" placeholder="营业执照上统一社会信用代码"></td>
            </tr >
            <tr><td id="td_cinema" colspan="2" >影院：<input readonly="readonly" type="text" name="cinema" id="cinema" placeholder="专资编码搜索"></td></tr >
            <tr><td id="td_province" colspan="1">省份：<input readonly="readonly" type="text"  name="province" id="province" placeholder="专资编码搜索"> </td></tr >
            <tr><td id="td_city"  colspan="1">城市：<input readonly="readonly" name="city" type="text"  id="city" placeholder="专资编码搜索"></tr >
            <tr><td id="td_district">区县：<input readonly="readonly" type="text"  name="district" id="district"  placeholder="专资编码搜索"></td><td></td></tr >
            <tr><td id="td_circuit">院线：<input display="inline" readonly="readonly" name="circuit" type="text"  id="circuit" placeholder="专资编码搜索"></td></tr >
            <tr><td id="address" colspan="2" >地址：<input style="width: 82%"  name="address" type="text" placeholder="请输入地址"></td></tr >
            <tr><td id="charger" colspan="2">负责人：<input display="inline" name="charger"  type="text" placeholder="影院进货负责人姓名"></td></tr>

            <tr><td id="charger_mobile"  colspan="2">手机号：<input  name="charger_mobile"  type="text" placeholder="影院进货负责人手机"></td></tr>

            <tr><td >合伙人手机号：<input id="mate_mobile"  name="mate_mobile" type="text" placeholder="请输入合伙人手机"></td></tr >

            <tr><td colspan="2" id="sign_user" name="sign_user" colspan="2">签约人：{$sign_user}</td></tr>

            <input type="hidden" name="image_data">
            <input type="hidden" name="user_id"  value="{$user_id}" >
       <!--     <input type="hidden" name="hide_province">
            <input type="hidden" name="hide_city">
            <input type="hidden" name="hide_district">    -->

            <input type="hidden" name="store_branch" id="store_branch" value="0">

        </table>
        <br><br>
        <a   class="ui primary button"  id="commit"  type="button">确认创建</a>
        <br>


    </form>
</div>



</body>
</html>

<script>

    $('#commit').click(function (e) {

        e.preventDefault();
              var data = {}
        form.serializeArray().forEach(function (item) {
            data[item['name']] = item['value'];
        });

        data.image = form.find('[name="file0"]').val();
        data.mate_mobile = form.find('[name="mate_mobile"]').val();
        data.charger = form.find('[name="charger"]').val();
        data.address = form.find('[name="address"]').val();
        data.company = form.find('[name="company"]').val();
        data.credit_code = form.find('[name="credit_code"]').val();
        data.charger_mobile = form.find('[name="charger_mobile"]').val();


        if (!data.image) {
            form.find('#file0').addClass('error');
            alert("没选择图片");
            return false;
        }

        if (!data.company) {
            form.find('#file0').addClass('error');
            alert("开发票的公司名称没填写");
            return false;
        }

        if (!data.credit_code) {
            form.find('#file0').addClass('error');
            alert("开发票的社会统一信用编码没填写");
            return false;
        }


        if (!data.address) {
            form.find('#file0').addClass('error');
            alert("地址没填写");
            return false;
        }

        if (!data.charger) {
            form.find('#file0').addClass('error');
            alert("负责人姓名没填写");
            return false;
        }

        if (!data.mate_mobile) {
            form.find('#file0').addClass('error');
            alert("合伙人手机号没填写");
            return false;
        }

        if (!data.charger_mobile) {
            form.find('#file0').addClass('error');
            alert("负责人手机号没填写");
            return false;
        }

        //发送ajax 查询负责人手机号
        $.ajax({
            url : '/cinema_h5/check_charger?charger_mobile='+data.charger_mobile,
            type : 'get',
            dataType : 'json',
            success : function(charger_info){
                if(charger_info==0){
                    form.submit();
                }else{
                    //负责人注册过门店了
                    var iRet = confirm("此负责人手机号下已有门店，" +
                            "如确认将把门店创建成该负责人管理的连锁影院：" +
                            "账号将下发至负责人手机号登录掌柜端。" +
                            "非创建连锁影院请点击取消，更换其他负责人手机号。");

                    if( !iRet){
                        $("#store_branch").attr("value", 0) ;
                        return false;
                    }else{
                        //把分店标志置为1
                        $("#store_branch").attr("value", 1) ;
                        form.submit();
                    }
                }
            }
        });

    });

    /*图片预览*/
    $("#file0").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#cover").attr("src", objUrl) ;
            $("#cover").attr("width", "300") ;
            $("#cover").attr("height", "250") ;
        }
    });
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
    $("#search").click(function(){

        var zzb_code = $('#zzb_code').val();

        //发送ajax
        $.ajax({
            url : '/cinema_h5/zzb_info?zzb_code='+zzb_code,
            type : 'get',
            dataType : 'json',
            success : function(zzb_info){

                if(zzb_info==0){
                    alert('输入专资编码没查到门店');
                    return false;
                }
                $('#cinema').attr("value", zzb_info.cinema_name);
                $('#province').attr("value", zzb_info.province);
                $('#city').attr("value", zzb_info.city);
                $('#district').attr("value", zzb_info.county);
                $('#circuit').attr("value", zzb_info.circuit);

            }
        });


    });


    $("#glyphicon").click(function(){
        window.location.href="/cinema_h5";
    })

    $(".bm").click(function(){

        var value = $(this).attr("value");

        if(value == '1'){   //点击影院
            $("#zzbRow").show();

            $('#td_province').html(" 省份：<input  type='text'  name='province' id='province' placeholder='专资编码搜索' >");
            $('#td_city').html("城市：<input  type='text'  name='city' id='city' placeholder='专资编码搜索'>");
            $('#td_district').html("区县：<input  type='text'  name='district' id='district' placeholder='专资编码搜索'>");
            $('#td_cinema').html("影院：<input  type='text'  name='cinema' id='cinema' placeholder='专资编码搜索'>");
            $('#td_circuit').html("院线：<input  type='text'  name='circuit' id='circuit' placeholder='专资编码搜索'>");

            $('#province').attr("value",'');
            $('#city').attr("value",'');
            $('#district').attr("value",'');
            $('#cinema').attr("value",'');
            $('#circuit').attr("value",'');


            $('#province').attr("readonly","readonly" );
            $('#city').attr("readonly","readonly" );
            $('#district').attr("readonly","readonly" );
            $('#circuit').attr("readonly","readonly" );
            $('#cinema').attr("readonly","readonly" );


        }else{           //点击私人影吧
            //清空并隐藏专资编码
            $("input[name='zzb_code']").val("").focus(); // 清空并获得焦点
            $("#zzbRow").hide();
            //清空省市区内容
            $('#province').attr("value",'');
            $('#city').attr("value",'');
            $('#district').attr("value",'');
            $('#cinema').attr("value",'');
            $('#circuit').attr("value",'');
            $('#cinema').attr("placeholder",'手动输入');
            $('#circuit').attr("placeholder",'手动输入');


            $('#province').removeAttr("readonly");
            $('#city').removeAttr("readonly");
            $('#district').removeAttr("readonly");
            $('#circuit').removeAttr("readonly" );
            $('#cinema').removeAttr("readonly");

            //添加下拉框
            $('#td_province').html(" 省份：<select id='province' name='province' class='js_provinceList'><option  value='0' selected='selected'>请选择省份</option></select>");
            $('#td_city').html("城市：");
            $('#td_district').html("区县：");

            //初始化省份列表
            $.ajax({
                url : '/cinema_h5/ajax_get_provinces',
                type : 'get',
                dataType : 'json',
                success : function(province_list){
                    for (var i in province_list) {
                        var opt = $('<option value="'+province_list[i]['area_code']+'">'+province_list[i]['area']+'</option>');
                        $('.js_provinceList').append(opt);
                    }

                    {if $area['province_info']}
                    $('.js_provinceList').val("{$area['province_info']['area_code']}");
                    //触发请求
                    $('.js_provinceList').change();
                    {/if}

                    {if $area['city_info']}
                    $('.js_provinceList').val("{$area.province_info.area_code}");
                    $('.js_cityList').val("{$area.city_info.area_code}");
                    $('.js_cityList').change();
                    $('.js_countyList').val("{$area['county_info']['area_code']}");
                    {/if}
                }
            });

            //省份选择后
            $('.js_provinceList').change(function(){

                $('#td_city').html(" 城市：<select name='city' class='js_cityList'><option  value='0' selected='selected' >请选择城市</option></select>");

                //获取值
                if($(this).val() !== '0'){
                    var province = $(this).val();
                    $('.js_cityList').slideDown();
                    $('.js_cityList').val('0');
                    $('.js_countyList').slideUp();
                    $('.js_countyList').val('0');
                }else{
                    $('.js_cityList').slideUp();
                    $('.js_countyList').slideUp();
                    $('.js_countyList').val('0');
                    $('.js_cityList').val('0');
                    return false;
                }
                $('.js_cityList').empty();
                $('.js_cityList').append('<option value="0">请选择城市</option>');
                $('.js_countyList').empty();
                $('.js_countyList').append('<option value="0">请选择区(县)</option>');

                //发送ajax
                $.ajax({
                    url : '/cinema_h5/ajax_get_citys?province_code='+province,
                    success : function(city_list){
                        for (var i in city_list) {
                            var opt = $('<option value="'+city_list[i]['area_code']+'">'+city_list[i]['area']+'</option>');
                            $('.js_cityList').append(opt);
                        }

                        {if $area.city_info}
                        $('.js_cityList').val("{$area.city_info.area_code}");
                        {/if}
                    },
                    type : 'get',
                    dataType : 'json',
                    async : false,
                });


                //选择城市后
                $('.js_cityList').change(function(){

                    $('#td_district').html(" 区县：<select name='district' class='js_countyList'><option  value='0' selected='selected'>请选择区县</option></select>");

                    if ( $('.js_provinceList').val() === '0' || $('.js_cityList').val() === '0') {
                        $('.js_countyList').slideUp();
                        $('.js_countyList').val('0');
                        return false;
                    } else {
                        $('.js_countyList').slideDown();
                        $('.js_countyList').val('0');
                    }

                    $('.js_countyList').empty();
                    $('.js_countyList').append('<option value="0">请选择区(县)</option>');

                    //获取省份的key和值
                    var province_code = $('.js_provinceList').val();
                    var pro_text = $('.js_provinceList').text();

                    //获取城市的值
                    var city_code = $(this).val();

                    //发送ajax
                    $.ajax({
                        url : '/cinema_h5/ajax_get_countys?province_code='+province_code+'&city_code='+city_code,
                        type : 'get',
                        dataType : 'json',
                        success : function(county_list){
                            for (var i in county_list) {
                                var opt = $('<option value="'+county_list[i]['area_code']+'">'+county_list[i]['area']+'</option>');
                                $('.js_countyList').append(opt);
                            }

                            {if $area['county_info']}
                            $('.js_countyList').slideDown();
                            $('.js_countyList').val("{$area['county_info']['area_code']}");
                            {/if}
                        }
                    });

                });

            });

        }

    });



    var form = $('#form0');

    form.find('[name="file0"]').on('change', function () {
            var image = $(this).get(0).files[0];
            var reader = new FileReader();
            reader.onloadend = function () {
                form.find('[name="image_data"]').val(reader.result.split(',')[1]);
            }
            if (image) {
                reader.readAsDataURL(image);
            } else {
                form.find('[name="image_data"]').val('');
            }
        });

</script>